import React from 'react';
import styles from './index.less';
import { connect, Helmet } from 'umi';

// 后端返回的数据结构
var data = {
  callType: 1,
  craneWorkList: [
    {
      craneId: 'CR33',
      workQueueList: [
        {
          bappendWorkQueue: true,
          bayId: '26',
          bimportBay: true,
          endWorkTime: '2021-09-23 00:36:00',
          startWorkTime: '2021-09-23 00:00:00',
          totalWiCount: 79,
          workInstructionCount: 22,
          workQueueName: 'COSCN888.Disch.26A.40s',
        },
        {
          bappendWorkQueue: true,
          bayId: '26',
          bimportBay: true,
          endWorkTime: '2021-09-23 01:36:00',
          startWorkTime: '2021-09-23 00:36:00',
          totalWiCount: 79,
          workInstructionCount: 20,
          workQueueName: 'COSCN888.Load.26B.40s',
        },
        {
          bappendWorkQueue: true,
          bayId: '26',
          bimportBay: true,
          endWorkTime: '2021-09-23 02:57:00',
          startWorkTime: '2021-09-23 01:36:00',
          totalWiCount: 79,
          workInstructionCount: 37,
          workQueueName: 'COSCN888.Load.26A.40s',
        },
      ],
    },
    {
      craneId: 'CR32',
      workQueueList: [
        {
          bappendWorkQueue: true,
          bayId: '19',
          bimportBay: false,
          endWorkTime: '2021-09-23 00:06:00',
          startWorkTime: '2021-09-23 00:00:00',
          totalWiCount: 15,
          workInstructionCount: 2,
          workQueueName: 'COSCN888.Disch.19A.20s',
        },
        {
          bappendWorkQueue: true,
          bayId: '18',
          bimportBay: false,
          endWorkTime: '2021-09-23 01:09:00',
          startWorkTime: '2021-09-23 00:06:00',
          totalWiCount: 58,
          workInstructionCount: 27,
          workQueueName: 'COSCN888.Load.18B.40s',
        },
        {
          bappendWorkQueue: true,
          bayId: '18',
          bimportBay: false,
          endWorkTime: '2021-09-23 02:15:00',
          startWorkTime: '2021-09-23 01:09:00',
          totalWiCount: 58,
          workInstructionCount: 29,
          workQueueName: 'COSCN888.Load.18A.40s',
        },
        {
          bappendWorkQueue: false,
          bayId: '10',
          bimportBay: false,
          endWorkTime: '2021-09-23 02:27:00',
          startWorkTime: '2021-09-23 02:15:00',
          totalWiCount: 24,
          workInstructionCount: 8,
          workQueueName: 'VTWQ@COSCN888.Disch.09A.20s',
        },
        {
          bappendWorkQueue: false,
          bayId: '10',
          bimportBay: false,
          endWorkTime: '2021-09-23 02:34:00',
          startWorkTime: '2021-09-23 02:27:00',
          totalWiCount: 24,
          workInstructionCount: 2,
          workQueueName: 'COSCN888.Load.10B.40s',
        },
      ],
    },
    {
      craneId: 'CR31',
      workQueueList: [
        {
          bappendWorkQueue: true,
          bayId: '10',
          bimportBay: false,
          endWorkTime: '2021-09-23 00:12:00',
          startWorkTime: '2021-09-23 00:00:00',
          totalWiCount: 24,
          workInstructionCount: 8,
          workQueueName: 'VTWQ@COSCN888.Disch.09A.20s',
        },
        {
          bappendWorkQueue: true,
          bayId: '10',
          bimportBay: false,
          endWorkTime: '2021-09-23 00:38:00',
          startWorkTime: '2021-09-23 00:12:00',
          totalWiCount: 24,
          workInstructionCount: 9,
          workQueueName: 'COSCN888.Load.10B.40s',
        },
        {
          bappendWorkQueue: false,
          bayId: '07',
          bimportBay: false,
          endWorkTime: '2021-09-23 00:41:00',
          startWorkTime: '2021-09-23 00:38:00',
          totalWiCount: 5,
          workInstructionCount: 1,
          workQueueName: 'COSCN888.Load.07A.20s',
        },
        {
          bappendWorkQueue: false,
          bayId: '06',
          bimportBay: false,
          endWorkTime: '2021-09-23 01:14:00',
          startWorkTime: '2021-09-23 00:41:00',
          totalWiCount: 16,
          workInstructionCount: 15,
          workQueueName: 'COSCN888.Load.06A.40s',
        },
        {
          bappendWorkQueue: false,
          bayId: '02',
          bimportBay: false,
          endWorkTime: '2021-09-23 01:26:00',
          startWorkTime: '2021-09-23 01:14:00',
          totalWiCount: 50,
          workInstructionCount: 4,
          workQueueName: 'COSCN888.Disch.02A.40s',
        },
        {
          bappendWorkQueue: false,
          bayId: '03',
          bimportBay: false,
          endWorkTime: '2021-09-23 01:38:00',
          startWorkTime: '2021-09-23 01:26:00',
          totalWiCount: 21,
          workInstructionCount: 4,
          workQueueName: 'COSCN888.Disch.03A.20s',
        },
        {
          bappendWorkQueue: false,
          bayId: '03',
          bimportBay: false,
          endWorkTime: '2021-09-23 01:53:00',
          startWorkTime: '2021-09-23 01:38:00',
          totalWiCount: 21,
          workInstructionCount: 5,
          workQueueName: 'COSCN888.Load.03B.20s',
        },
        {
          bappendWorkQueue: false,
          bayId: '02',
          bimportBay: false,
          endWorkTime: '2021-09-23 02:29:00',
          startWorkTime: '2021-09-23 01:53:00',
          totalWiCount: 50,
          workInstructionCount: 24,
          workQueueName: 'VTWQ@COSCN888.Load.01B.20s',
        },
        {
          bappendWorkQueue: false,
          bayId: '02',
          bimportBay: false,
          endWorkTime: '2021-09-23 03:08:00',
          startWorkTime: '2021-09-23 02:29:00',
          totalWiCount: 50,
          workInstructionCount: 13,
          workQueueName: 'COSCN888.Load.02A.40s',
        },
      ],
    },
    {
      craneId: 'CR34',
      workQueueList: [
        {
          bappendWorkQueue: true,
          bayId: '30',
          bimportBay: false,
          endWorkTime: '2021-09-23 00:45:00',
          startWorkTime: '2021-09-23 00:00:00',
          totalWiCount: 43,
          workInstructionCount: 18,
          workQueueName: 'COSCN888.Disch.30A.40s',
        },
        {
          bappendWorkQueue: true,
          bayId: '29',
          bimportBay: false,
          endWorkTime: '2021-09-23 00:48:00',
          startWorkTime: '2021-09-23 00:45:00',
          totalWiCount: 5,
          workInstructionCount: 1,
          workQueueName: 'COSCN888.Disch.29A.20s',
        },
        {
          bappendWorkQueue: true,
          bayId: '30',
          bimportBay: false,
          endWorkTime: '2021-09-23 01:18:00',
          startWorkTime: '2021-09-23 00:48:00',
          totalWiCount: 43,
          workInstructionCount: 10,
          workQueueName: 'COSCN888.Load.30B.40s',
        },
        {
          bappendWorkQueue: true,
          bayId: '30',
          bimportBay: false,
          endWorkTime: '2021-09-23 01:57:00',
          startWorkTime: '2021-09-23 01:18:00',
          totalWiCount: 43,
          workInstructionCount: 14,
          workQueueName: 'COSCN888.Load.30A.40s',
        },
      ],
    },
  ],
  vesselReference: 'COSCN888',
};

@connect(({}) => ({}))
export default class extends React.Component {
  state={
    series:[],
  }
  componentDidMount = () => {
    var today = new Date();
    var day = 1000 * 60 * 60;
    // Set to 00:00:00:000 today
    today.setUTCHours(0);
    today.setUTCMinutes(0);
    today.setUTCSeconds(0);
    today.setUTCMilliseconds(0);
    today = today.getTime();
    // THE CHART
    Highcharts.ganttChart('container', {
      title: {
        text: '甘特图测试例子',
      },
      xAxis: {
        currentDateIndicator: true,
        min: today - 3 * day,
        max: today + 18 * day,
      },
      plotOptions: {
        gantt: {
          pathfinder: {
            type: 'simpleConnect',
          },
        },
      },
      series: [
        {
          data: [
            {
              name: '贝位 01  任务量 120',
              label: '新办公室',
              taskName: '更换新的办公地点',
              id: 'new_offices',
              start: today - 2 * day,
              end: today + 14 * day,
              color: '#9ED1A6',
            },
            {
              name: '贝位 02  任务量 140',
              taskName: '选址及装修',
              id: 'prepare_building',
              start: today - -3 * day,
              end: today + 8 * day,
              parent: 'new_offices',
              color: '#F3D95E',
            },
            {
              name: '贝位 03  任务量 140',
              taskName: '选址及装修',
              id: 'aaaa',
              start: today - 0 * day,
              end: today + 4 * day,
              color: '#DB4D16',
              parent: 'new_offices',
            },

            {
              name: '贝位 04  任务量 140',
              taskName: '选址及装修',
              id: 'bbbb',
              start: today - -1 * day,
              end: today + 6 * day,
              color: '#689BC6',
            },
            {
              name: '贝位 05  任务量 140',
              taskName: '选址及装修',
              id: 'cccc',
              start: today - 2 * day,
              end: today + 5 * day,
              color: '#34B1E1',
            },
            {
              name: '贝位 06  任务量 140',
              taskName: '选址及装修',
              id: 'prepare_building',
              start: today - 1 * day,
              end: today + 1 * day,
              color: '#623592',
            },
          ],
        },
      ],
    });
  };

  initGanttChart = () => {
    var today = new Date();
    var day = 1000 * 60 * 60;
    // Set to 00:00:00:000 today
    today.setUTCHours(0);
    today.setUTCMinutes(0);
    today.setUTCSeconds(0);
    today.setUTCMilliseconds(0);
    today = today.getTime();
    // THE CHART
    Highcharts.ganttChart('container', {
      title: {
        text: '甘特图测试例子',
      },
      xAxis: {
        currentDateIndicator: true,
        min: today - 3 * day,
        max: today + 18 * day,
      },
      plotOptions: {
        gantt: {
          pathfinder: {
            type: 'simpleConnect',
          },
        },
      },
      series: [
        {
          data: [
            {
              name: '贝位 01  任务量 120',
              label: '新办公室',
              taskName: '更换新的办公地点',
              id: 'new_offices',
              start: today - 2 * day,
              end: today + 14 * day,
              color: '#9ED1A6',
            },
            {
              name: '贝位 02  任务量 140',
              taskName: '选址及装修',
              id: 'prepare_building',
              start: today - -3 * day,
              end: today + 8 * day,
              parent: 'new_offices',
              color: '#F3D95E',
            },
            {
              name: '贝位 03  任务量 140',
              taskName: '选址及装修',
              id: 'aaaa',
              start: today - 0 * day,
              end: today + 4 * day,
              color: '#DB4D16',
              parent: 'new_offices',
            },

            {
              name: '贝位 04  任务量 140',
              taskName: '选址及装修',
              id: 'bbbb',
              start: today - -1 * day,
              end: today + 6 * day,
              color: '#689BC6',
            },
            {
              name: '贝位 05  任务量 140',
              taskName: '选址及装修',
              id: 'cccc',
              start: today - 2 * day,
              end: today + 5 * day,
              color: '#34B1E1',
            },
            {
              name: '贝位 06  任务量 140',
              taskName: '选址及装修',
              id: 'prepare_building',
              start: today - 1 * day,
              end: today + 1 * day,
              color: '#623592',
            },
          ],
        },
      ],
    });
  };
  render() {
    return (
      <div>
        <Helmet>
          <title>甘特图</title>
        </Helmet>
        <div id="container"></div>
      </div>
    );
  }
}
